<template>
  <div class="wrap">
    <a-table
      :dataSource="dataList"
      :columns="columns"
      rowKey="id"
      :pagination="false"
    >
      <template #operation="{ record }">
        <a-button type="primary" danger @click="del(record.id)">删除</a-button>
      </template>
    </a-table>
    <div class="page">
      <a-pagination
        v-model:current="current"
        v-model:pageSize="pageParams.rowsize"
        :total="total"
        show-less-items
        show-size-changer
        @showSizeChange="onShowSizeChange"
        @change="onChange"
      />
    </div>
  </div>
</template>

<script>
import {
  h,
  ref,
  toRefs,
  reactive,
  onMounted,
  computed,
  watch,
  createVNode,
} from "vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import Service from "@/api/service";
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";

export default {
  setup() {
    const state = reactive({
      dataList: [],
      columns: [
        {
          title: "id",
          dataIndex: "id",
        },
        {
          title: "姓名",
          dataIndex: "username",
        },
        {
          title: "年龄",
          dataIndex: "age",
        },
        {
          title: "手机号",
          dataIndex: "phone",
        },
        {
          title: "个性签名",
          dataIndex: "introduction",
        },
        {
          title: "操作",
          dataIndex: "operation",
          key: "operation",
          slots: {
            title: "operation",
            customRender: "operation",
          },
        },
      ],
      current: 1,
      pageParams: {
        pageno: 1,
        rowsize: 10,
      },
      total: 1,
    });
    const getDataList = async() => {
      const { data:res } = await Service.getAllUser(state.pageParams);
      console.log(res);
      state.dataList = res.data;
      state.total = res.total;
    }
    onMounted(async () => {
      getDataList()
    });
    const onShowSizeChange = async (current, pageSize) => {
      state.pageParams.pageno = 1;
      state.pageParams.rowsize = pageSize;
      getDataList()
    };
    const onChange = async pageNumber => {
      state.pageParams.pageno = pageNumber;
      getDataList()
    };
    const del = async (id) => {
      Modal.confirm({
        title: () => "提示",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "确定删除吗?",
        okText: () => "确定",
        okType: "danger",
        cancelText: () => "取消",

        async onOk() {
          const res = await Service.delUser({ userID: id });
          if (res.status == "1") {
            message.success("删除成功");
            getDataList()
          }
        },

        onCancel() {},
      });
    };
    return {
      ...toRefs(state),
      del,
      onShowSizeChange,
      onChange
    };
  },
};
</script>

<style lang='less' scoped>
.wrap {
  position: relative;
}
.page {
  // position: absolute;
  margin-top: 30px;
  display: flex;
  justify-content: right;
}
</style>
